<template>
    <el-dialog
        v-model="modalVisible"
        title="图片库"
        width="1168px"
        :before-close="close"
        class="mate-select-modal"
        top="100px"
        append-to-body
        >
        <div class="mate-select-modal-main">
            <mateFiles :groupWidth="160" @change="selectChange" :count="count" ref="filesRef" :isModal="true"></mateFiles>
        </div>
        <template v-if="count > 1 || count == -1" #footer>
          <span class="flex end">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="selectOk">确定</el-button>
          </span>
        </template>
    </el-dialog>
</template>
<script lang="ts">
export default {
  name: "mateSelectModal",
};
</script>
<script setup lang="ts">
import { ref, getCurrentInstance,nextTick } from "vue";
import mateFiles from "@/components/mate/files/list.vue";
const props = withDefaults(
  defineProps<{
    count?: number | string;
  }>(),
  {
    count: 1,
  }
);

const { proxy } = getCurrentInstance() as any

const emit = defineEmits(["change"]);

const modelSelectData = ref<string | number | string[] | number[] | any>([])

const modalStatus = ref<boolean>(false);

const modalVisible = ref<boolean>(false);

const filesRef = ref<HTMLElement>();

const open = (selectedData:string | string[] = []) => {
  if (modalStatus.value == true) {
    return;
  }
  modalStatus.value = true;
  modalVisible.value = true;
  nextTick(()=>{
    proxy?.$refs['filesRef']?.open(selectedData);
  })
};

const selectOk = () => {
  proxy?.$refs['filesRef']?.setYes()
};

const selectChange = (selectedData: string | string[]) => {
  modelSelectData.value = selectedData
  emit("change",selectedData);
  close()
}

const close = () => {
  modalStatus.value = false;
  modalVisible.value = false;
  proxy?.$refs['filesRef']?.close();
};

defineExpose({ open });
</script>
<style >
.mate-select-modal>.el-dialog__body{
    height:700px;
    padding: 0 10px 10px;
}
.mate-select-modal>.el-dialog__body .mate-select-modal-main{
    height: 100%;
}
</style>